<template>
    <div style="display: inline-block;min-width: 100%">
      <div class="search-bar">
        <Menu mode="horizontal" @on-select="tabSelect" active-name="electric">
          <MenuItem name="electric">
            <i class="monitor icon-electric"></i>
            <span>电</span>
          </MenuItem>
          <MenuItem name="water">
            <i class="monitor icon-water"></i>
            <span>水</span>
          </MenuItem>
          <MenuItem name="coolFlow">
            <i class="monitor icon-cool-flow"></i>
            <span>冷量</span>
          </MenuItem>
          <MenuItem name="gas">
            <i class="monitor icon-gas"></i>
            <span>燃气</span>
          </MenuItem>
          <MenuItem name="compressionAir">
            <i class="monitor icon-compression-air"></i>
            <span>压缩空气</span>
          </MenuItem>
        </Menu>
        <div class="search-time-inner">
          <label class="form-label">时间：</label>
          <DatePicker type="daterange" placeholder="请选择时间" @on-change="dateChange" style="width: 200px"></DatePicker>
        </div>
      </div>
      <div class="result-wrap">
        <div class="list-wrap" v-for="(item,index) in sysData" :key="item.column">
          <h1>{{item.column}}<i class="monitor icon-arrow" v-if="index < 4"></i></h1>
          <ul class="list-ul">
            <li v-for="node in item.list" :key="node.id" v-show="index == 0 || node.isShow">
              <label class="title">{{node.title}}</label>
              <i :class="{'show':!node.isShowChild, 'hide':node.isShowChild,}" v-if="node.hasChildNodes"  @click="slideChildNodes(node,index)"></i>
              <i v-else></i>
              <label class="value">{{node.value}}{{node.unit}}</label>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>
<script>
export default {
    name: 'hookup',
    directives: {},
    components: {},
    data () {
        return {
          showTabCon: false,
          eneryTypeMap: {
            water: '水',
            electric: '电',
            coolFlow: '冷量',
            gas: '燃气',
            compressionAir: '压缩空气'
          },
          params: {
            spaceCode: 'ZZ',
            eneryType: '电',
            dataCnt: 10
          },
          spaceList: [
            {value: 'ZZ', label: '郑州工厂'}
          ],
          companyData: [],
          factoryData: [],
          workshopData: [],
          lineData: [],
          equipmentData: [],
          sysData: [],
          spaceData: 'ZZ',
          tabActive: 'electric',
          isHideHandle: false
        }
    },
    props: {},
    computed: {},
    watch: {},
    methods: {
      loadData () {
        let This = this
        // 加载数据
        window.myapi.getAdminMeasureTreeData(this.params).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            This.sysData = resp.data.data.sysData
          } else {
            this.$Notice.warning({
              title: '提示',
              desc: resp.data.msg
            })
          }
        })
      },
      dateChange (e) {
      },
      tabSelect (e) {
        this.tabActive = e
        this.params.eneryType = this.eneryTypeMap[e]
        this.showTabCon = false
        this.loadData()
      },
      slideChildNodes (node, index) {
        index++
        let This = this
        let record = This.sysData[index].list
        let id = node.id
        record.forEach(function (e, i) {
          if (e.fatherNode === id) {
            if (node.isShowChild) {
              This.$set(e, 'isShow', false)
              This.hideChild(e, index)
            } else {
              This.$set(e, 'isShow', true)
            }
          }
        })
        node.isShowChild = !node.isShowChild
      },
      hideChild (node, index) {
        index++
        if (!node.hasChildNodes) return
        let This = this
        let record = This.sysData[index].list
        let id = node.id
        record.forEach(function (e, i) {
          if (e.fatherNode === id) {
            This.$set(e, 'isShow', false)
            This.hideChild(e, index)
          }
        })
        node.isShowChild = false
      }
    },
    beforeCreate () {
    },
    created () {
    },
    destroyed () {
      if (this.dataClock) clearInterval(this.dataClock)
    },
    mounted () {
      let This = this
      This.loadData()
      This.dataClock = setInterval(function () {
        window.myapi.getAdminMeasureTreeData(this.params).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            let record = resp.data.data.sysData
            record.forEach(function (e, i) {
              let oldList = This.sysData[i].list
              let newList = e.list;
              newList.forEach(function (e, i) {
                let oldNode = oldList[i]
                for (let key in oldNode) {
                  if (key !== 'isShowChild' && key !== 'isShow') {
                    This.$set(oldNode, key, e[key])
                  }
                }
              })
            })
          } else {
            this.$Notice.warning({
              title: '提示',
              desc: resp.data.msg
            })
          }
        })
      }, 10000)
    }
}
</script>
<style scoped>
ul,li{
  margin: 0;
  list-style: none;
}
.search-bar{
  height: 80px;
  line-height: 80px;
  background: #fff;
  border-bottom: solid 1px #d7dbe4;
  min-width: 1400px;
}
.search-time-inner{
  float: right;
  margin-right: 40px;
}
.ivu-menu-horizontal.ivu-menu-light:after{
  background:none;
}
.ivu-menu-item{
  font-size: 18px;
  padding: 0 5px;
  margin: 0 15px;
}
.ivu-menu-item > i {
  vertical-align: middle;
  font-size: 28px;
}
.ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover{
  border-bottom-width: 4px;
  color: #4e78fe;
  border-color: #4e78fe;
}
.ivu-menu-horizontal {
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  display: inline-block;
}
.form-label{
  font-size: 14px;
  color: #363636;
  vertical-align: middle;
  margin-left: 32px;
}
.line{
  height: 52px;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
  margin-left:28px;
  background: #d6dbe3;
}
.m-l10{
  margin-left: 10px!important;
}
.ivu-menu-item > span{
  vertical-align: middle;
}
.result-wrap{
  font-size: 0;
  overflow: auto;
  padding: 24px 46px;
  box-sizing: border-box;
  min-width: 1700px;
}
.list-wrap{
  vertical-align: top;
  font-size: 0;
  width: 280px;
  margin-left: 52px;
  display: inline-block;
}
.list-wrap:first-child{
  margin-left: 0;
}
.list-wrap>h1{
  text-align: center;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  color: #fff;
  background: #38425d;
  font-weight: normal;
  position: relative;
}
.list-wrap>h1>i{
  position: absolute;
  right: -40px;
  top: 2px;
  font-size: 26px;
  color: #4e78fe;
}
.list-ul{
  width: 100%;
  font-size: 0;
}
.list-ul>li{
  width: 100%;
  font-size: 0;
  height: 50px;
  line-height: 50px;
  padding-left: 16px;
  box-sizing: border-box;
  background: #e6e7eb;
}
.list-ul>li:nth-child(2n){
  background: #eff0f4;
}
.list-ul>li>label{
  font-size: 14px;
  vertical-align: middle;
  color: #515a6e;
}
.list-ul>li>label.title{
  float: left;
}
.list-ul>li>label.value{
  float: right;
  margin-right: 20px;
}
.list-ul>li>i{
  width:16px;
  height:16px;
  display: inline-block;
  float: right;
  margin: 17px 14px 0 0;
  cursor: pointer;
}
.list-ul>li>i.show{
  background: url("../../assets/icon/show.png");
}
.list-ul>li>i.hide{
  background: url("../../assets/icon/hide.png");
}
</style>
